import React, { Component, useEffect, useState, useRef } from 'react'
import { BenchModelState, IRouteComponentProps, Link, useDispatch, useSelector, history } from "umi"
import Editor from 'for-editor'
import { Menu, Dropdown, Button, Anchor, Popconfirm, message, Drawer, Input, Space, Switch, Form, Select } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import styles from './index.less'
import './index.less'
import classNames from 'classnames';
const Editors: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
    const id = match.params.id;
    const { getArticleDetailsList } = useSelector((state: { bench: BenchModelState }) => state.bench)
    console.log(getArticleDetailsList);

    let DetailsList = JSON.parse(localStorage.getItem('DetailsList') as string) || []

    // 抽屉
    const [visible, setVisible] = useState(false);
    function showDrawer() {
        setVisible(true);
    };
    function onClose() {
        setVisible(false);
    };

    const [flag, setFlag] = useState(true)
    console.log(flag);

    const dispatch = useDispatch()
    // useEffect(() => {
    //     dispatch({
    //         type: "bench/getArticleDetails",
    //         payload: id
    //     })
    // }, [])
    // console.log(getArticleDetailsList.toc);


    function handleChange() {
        console.log("123");
    }
    const { Link } = Anchor;
    const handleAnchorClick = (e: { preventDefault: () => void; }, link: any) => {
        e.preventDefault();
    };
    function DeleteOK() {
        history.go(-1)
    }
    // 发布
    function publish() {
        // 假的
        message.success('文章发布成功')
    }

    function setflag() {
        setFlag(false)
        console.log(flag);
    }
    function setflags() {
        console.log(123);

        setFlag(true)
        console.log(flag);
    }

    // 删除
    function setDelete() {
        dispatch({
            type: 'bench/getArticleDetailsDelete',
            payload: id
        })
        message.success('文章删除成功')
        history.go(-1)
    }

    // 草稿
    function setDraft() {
        dispatch({
            type: 'bench/getArticleDetailsDraft',
            payload: getArticleDetailsList
        })
        message.success('文章已保存为草稿')
    }



    const [value, setValue] = useState("")
    const [inpvalue, setInpvalue] = useState('')

    let textA = useRef<HTMLInputElement>(null)
    

    // 下拉
    const { Option } = Select;

    return <div className={styles.editors}>
        <div className={styles.header}>
            <div className={styles.headers}>
                <div className={styles.headerleft}>
                    {/* <span>x</span> */}
                    <Popconfirm title="确认关闭？如果有内容变更，请先保存。" placement="rightBottom" onConfirm={() => { DeleteOK() }} okText="确认" cancelText="取消">
                        <span className={styles.links}>x</span>
                    </Popconfirm>
                    <div>
                        <input ref={textA} value={getArticleDetailsList.title} onChange={() => { }} placeholder='请输入文章标题' type="text" name="" id="" />
                    </div>
                </div>
                <div className={styles.headerright}>
                    <div>
                        <button onClick={() => publish()}>发 布</button>
                    </div>
                    <Dropdown overlay={<Menu>
                        <Menu.Item>
                            <a target="_blank" rel="noopener noreferrer" href="https://creationadmin.shbwyz.com/article/editor/creation.shbwyz.com/article/f77ada6c-c858-48e1-8df1-a58532acdf72">
                                查看
                            </a>
                        </Menu.Item>
                        <Menu.Item>
                            <span onClick={showDrawer}>设置</span>
                            <Drawer title="文章设置" placement="right" onClose={onClose} visible={visible}>
                                <div className={styles.inpList}>
                                    <div className={styles.inputtext}>
                                        <span>文章摘要</span> <textarea placeholder="请输入文章摘要" className={styles.textareas}></textarea>
                                    </div>
                                    <div className={styles._2JqVwlivDvuj5Yr3G6BP0A}>
                                        <span>访问密码</span>
                                        <Space direction="vertical">
                                            <Input.Password placeholder="输入后查看需要密码" />
                                        </Space>
                                    </div>
                                    <div className={styles._2JqVwlivDvuj5Yr3G6BP0A}>
                                        <span>付费参看</span>
                                        <Space direction="vertical">
                                            <Input.Password placeholder="输入后需要支付的费用" />
                                        </Space>
                                    </div>
                                    <div className={styles._2JqVwlivDvuj5Yr3G6BP0A}>
                                        <span>开启评论</span> <Switch defaultChecked />
                                    </div>
                                    <div className={styles._2JqVwlivDvuj5Yr3G6BP0A}>
                                        <span>首页推荐</span> <Switch checked={false} defaultChecked />
                                    </div>
                                    <div className={styles._2JqVwlivDvuj5Yr3G6BP0A}>
                                        <span>选择分类</span>
                                        <Form.Item >
                                            <Select>
                                                <Select.Option value="demo">前端</Select.Option>
                                                <Select.Option value="demo">Linux</Select.Option>
                                                <Select.Option value="demo">LeetCode</Select.Option>
                                                <Select.Option value="demo">要闻</Select.Option>
                                                <Select.Option value="demo">测试</Select.Option>
                                                <Select.Option value="demo">js</Select.Option>
                                                <Select.Option value="demo">后端</Select.Option>
                                                <Select.Option value="demo">阅读</Select.Option>
                                            </Select>
                                        </Form.Item>
                                    </div>
                                    <div className={styles._2JqVwlivDvuj5Yr3G6BP0A}>
                                        <span>选择标签</span>
                                        <Form.Item >
                                            <Select>
                                                <Select.Option value="demo">阅读</Select.Option>
                                                <Select.Option value="demo">git</Select.Option>
                                                <Select.Option value="demo">js</Select.Option>
                                                <Select.Option value="demo">bash</Select.Option>
                                                <Select.Option value="demo">CSS</Select.Option>
                                                <Select.Option value="demo">LeetCode</Select.Option>
                                                <Select.Option value="demo">java</Select.Option>
                                                <Select.Option value="demo">javascript</Select.Option>
                                            </Select>
                                        </Form.Item>
                                    </div>
                                    <div className={styles.Articletitle}>
                                        <div className={styles.Articletitleitem}>
                                            <span>文章封面</span>
                                            <div>
                                                <img src="" alt="" />
                                            </div>
                                        </div>
                                        <div className={styles.inputs}>
                                            <Input placeholder="请输入外部链接" />
                                        </div>
                                        <div className={styles.btns}>
                                            <button>移除</button>
                                        </div>
                                    </div>
                                </div>
                                <div className={styles.textok}>
                                    <button>确认</button>
                                </div>
                            </Drawer>
                        </Menu.Item>
                        <Menu.Item>
                            <span onClick={() => { setDraft() }}>保存 草稿</span>
                        </Menu.Item>
                        <Menu.Item>
                            <Popconfirm title="确认删除？删除内容后，无法恢复。。" placement="rightBottom" onConfirm={() => { setDelete() }} okText="确认" cancelText="取消">
                                <span className={styles.links}>删除</span>
                            </Popconfirm>
                        </Menu.Item>
                    </Menu>} placement="top">
                        <Button>. . .</Button>
                    </Dropdown>
                </div>
            </div>
        </div>
        <div className={styles.main}>
            <div className={styles.Editortext}>
                <div className={styles.outline} ><span onClick={() => setflags()}>大纲</span></div>
                <Editor preview={true} subfield={true} value={getArticleDetailsList.content} onChange={() => handleChange()} />
            </div>
            {
                flag ? <div className={styles.Editorlist}>
                    <div className={styles.Editorlistitem}>
                        <span>大纲</span>
                        <span onClick={() => setflag()}>x</span>
                    </div>
                    <div>
                        <Anchor onClick={handleAnchorClick} offsetTop={10} affix={false} style={{ height: "auto" }}>
                            {
                                DetailsList.map((item: any) => {
                                    return <div key={item.id}>
                                        <div>
                                            <Link className={classNames(`h${item.level}`, styles.FloorBright)} href={`#${item.id}`} title={item.text} ></Link >
                                        </div>
                                    </div>
                                })
                            }
                        </Anchor>
                    </div>
                </div> : null
            }

        </div>
    </div>
}
export default Editors